<template>
    <div class="countdown-container">
        <div class="time-block">
            <span class="time-value">{{ hours }}</span>
        </div>
        <div class="time-separator">时</div>
        <div class="time-block">
            <span class="time-value">{{ minutes }}</span>
        </div>
        <div class="time-separator">分</div>
        <div class="time-block">
            <span class="time-value">{{ seconds }}</span>
        </div>
        <div class="time-separator">秒</div>
    </div>
</template>

<script>
export default {
    name: 'CountdownTimer',
    props: {
        // 总秒数
        totalSeconds: {
            type: Number,
            required: true,
            default: 0,
            validator: value => value >= 0
        },
        // 是否自动开始
        autoStart: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            remainingSeconds: this.totalSeconds,
            timer: null
        }
    },
    computed: {
        hours() {
            return Math.floor(this.remainingSeconds / 3600).toString().padStart(2, '0')
        },
        minutes() {
            return Math.floor((this.remainingSeconds % 3600) / 60).toString().padStart(2, '0')
        },
        seconds() {
            return (this.remainingSeconds % 60).toString().padStart(2, '0')
        }
    },
    watch: {
        totalSeconds(newVal) {
            this.reset(newVal)
        }
    },
    mounted() {
        if (this.autoStart) {
            this.start()
        }
    },
    beforeDestroy() {
        this.clearTimer()
    },
    methods: {
        start() {
            this.clearTimer()
            if (this.remainingSeconds <= 0) {
                this.$emit('end')
                return
            }

            this.timer = setInterval(() => {
                if (this.remainingSeconds > 0) {
                    this.remainingSeconds--
                    this.$emit('tick', {
                        hours: this.hours,
                        minutes: this.minutes,
                        seconds: this.seconds,
                        totalSeconds: this.remainingSeconds
                    })
                } else {
                    this.$emit('end')
                    this.clearTimer()
                }
            }, 1000)
        },
        pause() {
            this.clearTimer()
        },
        reset(newSeconds = this.totalSeconds) {
            this.remainingSeconds = newSeconds
            if (this.autoStart) {
                this.start()
            }
        },
        clearTimer() {
            if (this.timer) {
                clearInterval(this.timer)
                this.timer = null
            }
        }
    }
}
</script>

<style scoped>
.countdown-container {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
}

.time-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 5px;

}

.time-value {
    font-weight: 400;
    font-size: 20px;
    color: #D41F19;
    height: 26px;
    padding: 0 6px;
    background: #FFFFFF;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.time-label {
    font-size: 0.8rem;
    color: #666;
    margin-top: 5px;
}

.time-separator {
    font-weight: 400;
    font-size: 18px;
    color: #FFFBFC;
}

@media screen and (max-width:768px){
    .time-value{
        font-size: 12px;
        height: 18px;
    }
    .time-separator{
        font-size: 12px;
    }
}
</style>